<?php require_once(dirname(__FILE__).'/../inc/config.inc.php');IsModelPriv('member');

$dosql->Execute("SELECT `id` FROM `#@__order` WHERE  delstate='' ",6);
$count_all=$dosql->GetTotalRow(6); //所有工单

$dosql->Execute("SELECT `id` FROM `#@__order` WHERE `jindu`=1  AND delstate='' ",1);
$count1=$dosql->GetTotalRow(1); //等待受理


$dosql->Execute("SELECT `id` FROM `#@__order` WHERE `jindu`>1 and  `jindu`<5  AND delstate='' ",2);
$count2=$dosql->GetTotalRow(2); //受理中

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>翰之博技术支持 数据大屏</title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<style>
	body{ max-height:1080px !important; overflow:hidden !important;}
</style>
</head>
<body>
	<header>
		翰之博技术支持 数据统计
		<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
	</header>
	<div id="content">
		<div class="content_left">
			<div class="dtuplc">
				<div class="current-num">
					<div>系统工单数量</div>
					<p> {{ count.all }}</p>
				</div>

			</div>
				<!--
                	DTU和PLC完
                -->
                <div class="online">
                	<div class="title"><img src="images/icon01.png" /> 报修设备类型</div>
                	<div class="online_con" id="container2">
                		
                	</div>
                </div>
                <div class="industry">
                	<div class="title"><img src="images/icon02.png"  /> 服务星级</div>
                	<div class="industry_con" id="guzhang"></div>
                </div>
            </div>
            <div class="content_center">
            	<div class="center_top">
            		<div class="title"><img src="images/fenbu.png" width="30"  /> <a href="../index.php" target="_blank">平台数据分布</a></div>
            		<div class="center_top_con" id="distribution_map">
            		</div>
            	</div>
            	<div class="center_bot">
            		<table class="panel-table"bordercolor="#0d48e0" border="1">
            			<thead bgcolor="#0e4ae0" align="center" >
            				<tr height="40">
            					<th colspan="6"><img src="images/icon04.png" /> 报修列表</th>
            				</tr>
            			</thead>
            			<tbody>
            				<tr class="aaa" align="center">
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">区域</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">单位</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">联系人</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">故障</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">进度</td>
            					<td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">操作</td>
            				</tr>
            				<tr v-for="y in order.slice(0,6)" class="aaa" style="font-size: 16px;" align="center" >
            					<td>{{ y.area }}</td>
            					<td>{{ y.school }}</td>
            					<td>{{ y.truename }}</td>
            					<td>{{ y.content }}</td>
            					<td>{{ y.jindu }}</td>
            					<td>{{ y.id }}</td>
            				</tr>
            			</tbody>
            		</table>
            	</div>
            </div>
            <div class="content_right">
            	<div class="report">
            		<div class="report1">
            			<p>等待受理</p>
            			<small> {{ count.waiting }}条</small>
            		</div>
            		<div class="report2">
            			<p style="color:green">受理中</p>
            			<small> {{ count.doing }} 条</small>
            		</div>
            	</div>
            	<div class="news_report">
            		<div class="title"><img src="images/icon05.png" /> 报修完成率</div>
            		<div class="news_list" id="wanchenglv">

            		</div>
            	</div>
            	<div class="data_box">
            		<div class="title"><img src="images/icon06.png" /> 报修次数</div>
            		<div class="data_con" id="jilu">
            		</div>
            	</div>
            </div>
        </div>
        <!--遮罩层-->


        <!-- Morris Charts CSS -->
        <link href="../ui/css/plugins/morris.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.min.js"></script>		
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="js/china.js"></script>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/times.js"></script>

        <script type="text/javascript" src="js/index.js"></script>
        
        
        <!-- Morris Charts JavaScript --> 
        <script src="../ui/js/plugins/morris/raphael.min.js"></script> 
        <script src="../ui/js/plugins/morris/morris.min.js"></script>        
        <script type="text/javascript" src="../layer/layer.js"></script>
        
        <script type="text/javascript">

        	$(function() {

        		Morris.Area({
			  // ID of the element in which to draw the chart.
			  element: 'jilu',
			  // Chart data records -- each entry in this array corresponds to a point on
			  // the chart.
			  data: [
			  <?php 
			// 近30天 报表 
			  $sql5="SELECT FROM_UNIXTIME(`post_time` ,'%Y-%m-%d' ) as a,count(id) as b FROM `#@__order`  WHERE (TO_DAYS( NOW( ) ) - TO_DAYS( FROM_UNIXTIME( `post_time` ,  '%Y%m%d' )) <=10) group by a asc LIMIT 0 , 30"; 
			 $dosql->Execute("$sql5",9);  //每天用户列表 
			 while($result=$dosql->GetArray(9)){
			 	$d=$result['a'];
			 	echo "{ d: '".$d."',visits:".$result['b']."},";
			 }
			 ?> 

			 ],
			  // The name of the data record attribute that contains x-visitss.
			  xkey: 'd',
			  // A list of names of data record attributes that contain y-visitss.
			  ykeys: ['visits'],
			  // Labels for the ykeys -- will be displayed when you hover over the
			  // chart.
			  labels: ['提交次数'],
			  // Disables line smoothing
			  smooth: false,
			});


        		getData()

        	})

 //定时刷新
 window.setInterval(function () {
 	getData();       
 },3000);


//加载数据
function getData(){	
	scn_data={};
	$.ajax({
		type: 'POST',
		url: "data.php",
		data:{time:Date.parse(new Date())},
		dataType: 'JSON',
		success: function (result) {
			console.log(result);
			if (result.errno == 0) {
				scn_data=result.data;
				var vm = new Vue({
					el: '#content',
					data: scn_data,
					methods: {
						details: function() {

						}
					}
				})

				/*map*/
				var worldMapContainer1 = document.getElementById('distribution_map');
				var myChart = echarts.init(worldMapContainer1);
				var option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						y: 'bottom',
						data: [
						'已安装设备'
						],
						textStyle: {
							color: '#ccc'
						}
					},
					visualMap: {
						min: 0,
						max: 2500,
						left: 'right',
						top: 'bottom',
	                text: ['高', '低'], // 文本，默认为数值文本
	                calculable: true,
	                //      color: ['#26cfe4', '#f2b600', '#ec5845'],
	                textStyle: {
	                	color: '#fff'
	                }
	            },
	            series: [{
	            	name: '已安装设备',
	            	type: 'map',
	            	aspectScale: 0.75,
	            	zoom: 1.2,
	            	mapType: 'china',
	            	roam: false,
	            	label: {
	            		normal: {
	                            show: true,//显示省份标签
	                            textStyle:{color:"#c71585"}//省份标签字体颜色
	                        },    
	                        emphasis: {//对应的鼠标悬浮效果
	                        	show: true,
	                        	textStyle:{color:"#800080"}
	                        } 
	                    },
	                    itemStyle: {
	                    	normal: {
	                            borderWidth: .5,//区域边框宽度
	                            borderColor: '#009fe8',//区域边框颜色
	                            areaColor:"#ffffff",//区域颜色
	                        },
	                        emphasis: {
	                        	borderWidth: .5,
	                        	borderColor: '#4b0082',
	                        	areaColor:"#ffdead",
	                        }
	                    },
	                    data: function() {
	                    	var serie = [];
	                    	for(var i = 0; i < vm.map.length; i++) {
	                    		var item = {
	                    			name: vm.map[i].area,
	                    			value: vm.map[i].cnt
	                    		};
	                    		serie.push(item);
	                    	}
	                    	return serie;
	                    }()

	                }
	                ]
	            };

	            myChart.setOption(option);

			    // 使用刚指定的配置项和数据显示图表。
			    myChart.setOption(option);
			    myChart.on('click', function (params) {//点击事件
			    	if (params.componentType === 'series') {
			    	}
			    })

			    /*map*/

			    /* type */
			    var dom = document.getElementById("container2");
			    var myChart = echarts.init(dom);
			    var app = {};
			    option = null;
			    option = {

			    	calculable : true,
			    	series : [
			    	{
			    		name:'访问来源',
			    		type:'pie',
			    		radius : '75%',
			    		center: ['50%', '50%'],
			    		data: function() {
			    			var serie = [];
			    			for(var i = 0; i < vm.order_type.length; i++) {
			    				var item = {
			    					name: vm.order_type[i].typename,
			    					value: vm.order_type[i].cnt
			    				};
			    				serie.push(item);
			    			}
			    			return serie;
			    		}()
			    	}
			    	]
			    };
			    if (option && typeof option === "object") {
			    	myChart.setOption(option, true);
			    }

			    /*完成率*/	
			    var wanchenglv = document.getElementById('wanchenglv');
			    var myChart = echarts.init(wanchenglv);

			    option = {
			    	tooltip : {
			    		formatter: "{a} <br/>{b} : {c}%"
			    	},
			    	series : [
			    	{
			    		name:'业务指标',
			    		type:'gauge',
			    		startAngle: 180,
			    		endAngle: 0,
            center : ['50%', '90%'],    // 默认全局居中
            radius : 180,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                	width: 100
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
            	formatter: function(v){
            		switch (v+''){
            			case '10': return '低';
            			case '50': return '中';
            			case '90': return '高';
            			default: return '';
            		}
            	},
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	color: '#fff',
                	fontSize: 15,
                	fontWeight: 'bolder'
                }
            },
            pointer: {
            	width:10,
            	length: '90%',
            	color: 'rgba(255, 255, 255, 0.8)'
            },
            title : {
            	show : true,
                offsetCenter: [0, '-60%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	color: '#fff',
                	fontSize: 30
                }
            },
            detail : {
            	show : true,
            	backgroundColor: 'rgba(0,0,0,0)',
            	borderWidth: 0,
            	borderColor: '#ccc',
            	width: 100,
            	height: 40,
                offsetCenter: [0, -40],       // x, y，单位px
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	fontSize : 50
                }
            },
            data:[{value: vm.datas.working, name: '完成率'}]
        }
        ]
    };

    myChart.setOption(option, true);

}	
}

})

}



//工单查看
function dongdanshow(id){
	//iframe窗
	layer.open({
	  skin: 'layui-layer-molv', //样式类名
	  type: 2,
	  title: '工单详情',
	  shadeClose: true,
	  shade: false,
      //maxmin: true, //开启最大化最小化按钮
      area: ['893px', '600px'],
     content: ['../ordershow.php?id='+id], //iframe的url，no代表不显示滚动条

 });
}




</script>

</body>
</html>
